<template>
  <div>
    <div class="w-header">
      <div class="other">
        <el-button
          type="primary"
          icon=""
          plain
          @click="op()"
          v-hasPermi="['system:client:add']"
          style="background-color: rgba(0,0,0,0.4); border: none;"
          >全屏</el-button
        >
      </div>
      <div></div>
      <div class="title-wrapper">
        <dv-decoration7>
          <div class="title">&nbsp;{{ props.title }}&nbsp;</div>
        </dv-decoration7>
      </div>
      <div class="time">
        {{ currentTime }}
      </div>
    </div>
    <div class="bottom">
      <dv-decoration-10 style="width:96%;height:5px;" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
const props = defineProps({
  title: {
    type: String, //参数类型
    default: '监控平台', //默认值
    required: true //是否必须传递
  }
})
const op = () => {
  window.open('/swimming/plan/index', '_blank');
}

const currentTime = ref('');

setInterval(() => {
  const date = new Date();
  currentTime.value = date.toLocaleDateString() + '   ' + date.toLocaleTimeString();
}, 1000
);
onMounted(() => {
  const date = new Date();
  currentTime.value = date.toLocaleDateString() + '   ' + date.toLocaleTimeString();
})
</script>

<style lang="scss" scoped>
.w-header {
  height: 80px;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.4);

  .other {
    position: absolute;
    left: 0;
    top: 0;
  }

  .title {
    font-size: 3rem;
    text-align: center;
    // --c: rgba(25, 150, 200);
    --c: rgba(25, 250, 200,0.6);
    --w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
    --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
    background: var(--w1), var(--w2), var(--w1), var(--w2);
    background-position-x:
      -200%,
      -100%,
      0%,
      100%;
    background-position-y: 100%;
    background-size: 50.5% 100%;
    animation: m 3s infinite linear;
    font-weight: bold;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px var(--c);
  }

  @keyframes m {
    0% {
      background-position-x:
        -200%,
        -100%,
        0%,
        100%;
    }

    100% {
      background-position-x: 0%, 100%, 200%, 300%;
    }
  }
}

.time {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  background-color: rgba(120,220,2,0.5);
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

.bottom {
  display: flex;
  justify-content: center;
}
</style>
